<template>
  <div class="add">
    <div class="title">
      <h2>产品新增/编辑</h2>
    </div>
    产品名称: <input type="text" v-model="name1" /> <br />
    产品编号: <input type="text" v-model="num1" /><br />
    <span>&nbsp;&nbsp;</span> 成本价:
    <input type="text" v-model="price1" /><br />
    <span>&nbsp;&nbsp;&nbsp;</span>库存数:
    <input type="text" v-model="much1" /><br />
    <span>&nbsp;&nbsp;&nbsp;</span>登记人:
    <input type="text" v-model="person1" /><br />
    <div class="btn">
      <button @click="keep">保存</button>
      <button @click="none">取消</button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["name", "num", "price", "much", "person", "arr"]),
  },
  data() {
    return {
      name1: "",
      num1: "",
      price1: "",
      much1: "",
      person1: "",
    };
  },
  methods: {
    ...mapMutations(["pushArr"]),
    keep() {
      this.pushArr({
        pname: this.name1,
        id: this.arr.length + 1,
        uptDate: new Date(),
        price: this.price1,
        count: this.much1,
        user: this.person1,
        isShow: true,
      });
      this.$router.push("/products");
    },
    none() {
      this.$router.push("/products");
    },
  },
};
</script>

<style lang='less' scoped>
.add {
  width: 300px;
  margin: 30px auto;
  .title {
    text-align: center;
    h2 {
      line-height: 40px;
    }
  }
  input {
    margin: 7px 0px;
    outline-style: none;
  }
  .btn {
    text-align: center;
  }
  button {
    width: 86px;
    height: 33px;
    margin-right: 10px;
  }
}
</style>